<template>
    <div>
        <div class="main" ref="main"></div>
    </div>
</template>

<script>
    import * as echarts from "echarts";

    export default {
        name: "EventView",
        data (){
            return {
                myChart : null,
                option: {
                   title: {
                       text: '饼图高亮示例',
                       top :20,
                       left: 'center'
                   },
                   tooltip: {
                       trigger: 'item',
                       formatter: '{a} <br/>{b} : {c} ({d}%)'
                   },
                   legend: {
                       orient: 'vertical',
                       right: 30,
                       top : "center",
                       // data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']  // 图例于数据name保持一致
                   },
                   series: [
                       {
                           name: '访问来源',
                           type: 'pie',
                           radius: '60%',  // 半径
                           center: ['50%', '50%'],
                           data: [
                               { value: 335, name: '直接访问' },
                               { value: 310, name: '邮件营销' },
                               { value: 234, name: '联盟广告' },
                               { value: 135, name: '视频广告' },
                               { value: 1548, name: '搜索引擎' }
                           ],
                           emphasis: {
                               itemStyle: {
                                   shadowBlur: 10,
                                   shadowOffsetX: 10,
                                   shadowColor: 'rgba(0, 0, 0, 0.6)'
                               }
                           }
                       }
                   ]
               },
                currentIndex : -1,
                timeId : null,
                isLoop : true
            }
        },
        mounted(){
            this.myChart = echarts.init(this.$refs.main);
            this.myChart.setOption(this.option);

            // this.loopPlay(); // 循环展示扇形图的每一项数据


            // 可以同时监听容器及图表（可以处理空白区域）
            this.myChart.getZr().on('click', (event) => {
                // 没有 target 意味着鼠标/指针不在任何一个图形元素上，它是从“空白处”触发的。
                if (!event.target) {
                    // 点击在了空白处，停止定时器。
                    if(this.isLoop){
                        this.stop();
                    }else{
                        this.loopPlay()
                    }
                    this.isLoop = !this.isLoop;
                }
            });

            // 该监听器正在监听一个`echarts 事件`(只能监听到图表自身上的点击)
           /* this.myChart.on('click', function(event) {
                console.log(event); // event中包含了这个扇形图中的所有数据
            });*/
        },
        beforeDestroy(){
          if(this.timeId)
              clearInterval(this.timeId)
          if(this.myChart)
              this.myChart.dispose();
        },
        methods :{
            loopPlay(){
                // 实现每隔1s让其选中不同的扇形
                let dataLen = this.option.series[0].data.length;
                this.timeId = setInterval(()=>{
                    // 取消之前高亮的图形
                    this.myChart.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0,
                        dataIndex: this.currentIndex
                    });

                    this.currentIndex = (this.currentIndex + 1) % dataLen;  // 确定下次要高亮的item, 保证索引不越界

                    // 高亮当前图形
                    this.myChart.dispatchAction({
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: this.currentIndex
                    });

                    // 显示 tooltip
                    this.myChart.dispatchAction({
                        type: 'showTip',
                        seriesIndex: 0,
                        dataIndex: this.currentIndex
                    });

                }, 1000)
            },
            stop(){
                if(this.timeId){
                    clearInterval(this.timeId)
                    this.myChart.dispatchAction({
                        type: 'downplay',
                        seriesIndex: 0,
                        dataIndex: this.currentIndex
                    });
                }
            }
        }
    }
</script>

<style scoped>
    .main {
        width: 60vw;
        height: 550px;
        box-shadow: 1px 1px 10px #333;
        margin: 20px auto;
    }
</style>